<template>
  <div class="synthesize">
    <div class="synthesize-width gallery-bg">
      <Title title="综合展示" pinyin="ZONG HE ZHAN SHI"/>
      <el-row :gutter="12">
        <el-col :span="16">
          <div class="title-img">校园文化图片展出
            <More @click.native="handleMore(1)" />
          </div>
          <div style="height: 520px;padding: 0 12px">
            <el-carousel trigger="click" height="520px" :interval="5000">
              <el-carousel-item v-for="(item,index) in imgReduceList" :key="index">
                <el-row :gutter="12">
                  <el-col :span="12" v-for="(res, i) in item.children" :key="res.attachmentId">
                    <div style="height: 254px;background: #F3F9FF;cursor: pointer" :style="i===1 ? 'margin-bottom: 12px' : ''" @click="handleDetail(res)">
                      <img :src="res.filePath" class="background-img" alt=""/>
                    </div>
                  </el-col>
                </el-row>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title-img">工作交流
            <More @click.native="handleMore(2)" />
          </div>
          <div style="height: 520px;padding: 0 12px">
            <div style="padding-top: 8px">
              <div class="list-news" v-for="res in gzjl.articleList" :key="res.id" @click="handleNews(res)">
                <div style="display: flex;align-items: center;">
                  <div class="list-mark"></div>
                  <div class="list-title">{{ res.name }}</div>
                </div>
                <div style="width: 135px">
                  {{ dayjs(res.createDate).format('YYYY-MM-DD') }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
// import './layout.css'

// import './layout.css'
import Title from "@/components/Title.vue";
import More from "@/components/More.vue";
import dayjs from "dayjs";

export default {
  props: ['zhzsList', 'imgCollList'],
  components: {More, Title},
  data() {
    return {
      imageList: [],
      imgList: [],
      imgReduceList: [],
      xywh: [],
      gzjl: []
    }
  },
  watch: {
    imgCollList: {
      handler(data) {
        this.getImg(data)
      },
      deep: true
    },

    zhzsList: {
      handler(data) {
        const arr = data[0].hasChildren ? data[0].children : data[0].articleList
        arr.forEach(item => {
          if (item.moduleName === '工作交流') {
            this.gzjl = item
          }
        })
      },
      deep: true
    },
  },

  methods: {
    dayjs,
    handleOff() {

    },
    handleDetail(row){
      localStorage.removeItem('galleryList')
      if (row.id) {
        const {href} = this.$router.resolve({
          path: `/gallery`,
          query: {
            id: row.id,
            type: row.bizType,
          }
        });
        const list = []
        this.imgList.forEach(item=>{
          list.push({id: item.id,name: item.name})
        })
        localStorage.setItem('galleryList',JSON.stringify(list))
        window.open(href, '_blank');
      }
    },
    getImg(data) {
      // console.log('data',data)
      this.imgList = []
      let arr = []
      // 提出图片
      data.forEach(item => {
        if (item.articleList.length > 0) {
          arr = item.articleList
        }
        this.imgList = this.imgList.concat(arr)
      })
      // console.log('this.imgList', this.imgList)

      if(process.env.VUE_APP_ENV === 'local'){
        this.imgList.map(item => {
          item.filePath = item.filePath.replace("http://127.0.0.1:8080", "http://x15wywe2l9f7.xiaomiqiu.com")
        })
      }
      //取4的倍数，整数
      const num = Math.floor(this.imgList.length / 4)
      // console.log('num', num)
      // 4个一组，分类
      const classList = this.imgList.reduce((acc, curr, index) => {
        if (index % 4 === 0) acc.push([])
        acc[Math.floor(index / 4)].push(curr)
        return acc
      }, [])
      // console.log('classList', classList)
      this.imgReduceList = classList.map((x) => {
        return {
          "children": [...x]
        }
      });
      // 截取整数
      if(num > 0){
        this.imgReduceList = this.imgReduceList.slice(0, num)
      }
      // console.log('this.imgReduceList', this.imgReduceList)
      // console.log('this.imgReduceList', this.imgReduceList)
    },
    handleMore(type) {
      if(type === 1){
        const {href} = this.$router.resolve({
          path: `/more`,
          query: {
            id: this.imgCollList[0].id,
            code: this.imgCollList[0].code
          }
        });
        window.open(href, '_blank');
      }else{
        const {href} = this.$router.resolve({
          path: `/more`,
          query: {
            id: this.gzjl.id,
            code: this.zhzsList[0].code
          }
        });
        window.open(href, '_blank');
      }

    },
    getYear(value) {
      const a = value.split(' ')
      const b = a[0].split('-')
      return `${ b[0] }.${ b[1] }`
    },
    getDay(value) {
      const a = value.split(' ')
      const b = a[0].split('-')
      return b[2]
    },
    handleNews(row) {
      if (row.outHref) {
        window.open(row.outHref)
      } else {
        if (row.id) {
          const {href} = this.$router.resolve({
            path: `/news`,
            query: {
              id: row.id,
              type: row.bizType
            }
          });
          window.open(href, '_blank');
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.synthesize {
  width: 100%;
  //margin-top: 12px;
  display: flex;
  justify-content: center;
}

.synthesize-content {
  width: 1200px;
}

@media screen and (min-width: 1300px) {
  .synthesize-width {
    width: 1200px;
  }
}

@media screen and (min-width: 1800px) {
  .synthesize-width {
    width: 1400px;
  }
}

@media screen and (min-width: 2000px) {
  .synthesize-width {
    width: 1920px;
  }
}

.title {
  height: 54px;
  width: 100%;
  background: url('~@/assets/img/1703399778839.jpg');
  background-size: cover;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 54px;
  cursor: pointer;
}

.notice-content {
  padding: 0 15px;
  height: 386px;
  background: #F3F9FF;
}

.school-new-list {
  height: 76px;
  border-bottom: #60A3D7 1px dashed;
  padding-right: 12px;
  display: flex;
  align-items: center;
}

.school-new-list:last-child {
  border-bottom: 0;
}

.new-list-time {
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}

.new-list-time-day {
  color: #60A3D7;
  font-size: 28px;
  font-weight: 600;
}

.new-list-time-month {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.new-list-content {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  display: -webkit-box; /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
  -webkit-line-clamp: 2; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  cursor: pointer;
}

//.school-new-list {
//  height: 76px;
//  border-bottom: #102F7A 1px dashed;
//  padding-right: 12px;
//  display: flex;
//  align-items: center;
//}
///deep/ .el-carousel__indicators {
//  display: none;
//}
/deep/ .el-tabs__nav-scroll {
  width: 670px;
}

/deep/ .el-tabs__nav-wrap {
  width: 720px;
}

/deep/ .el-tabs__nav-prev {
  line-height: 54px;
}

/deep/ .el-tabs__nav-next {
  line-height: 54px;
}

/deep/ .el-tabs__item {
  height: 54px;
  font-size: 18px;
  font-weight: 400;
  padding: 0 30px;
  line-height: 54px;
  //top: 2px;
}

/deep/ .el-tabs__item:hover {
  color: #60A3D7;
}

/deep/ .el-tabs__item.is-active {
  background: #60A3D7;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/ .el-tabs__active-bar {
  height: 0;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 30px;
  line-height: 54px;
  top: 0;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 30px;
}

/deep/ .el-timeline {
  padding: 0;
  font-size: 16px;
}

/deep/ .el-timeline-item__node {
  background-color: #60A3D7;
}

/deep/ .el-timeline-item:last-child {
  padding-bottom: 0;
}

/deep/ .el-timeline-item__tail {
  border-left: 1px solid #60A3D7;
  top: 17px;
  //bottom: 1px;
  height: 25px;
}

/deep/ .el-timeline-item__node--normal {
  width: 8px;
  height: 8px;
  left: 1px;
  top: 5px;
}

/deep/ .el-tabs__header {
  margin: 0 0 12px;
}

/deep/ .is-bottom {
  margin: 0;
}

/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}

/deep/ .el-timeline-item__wrapper {
  padding-left: 12px;
}

/deep/ .el-carousel__indicators {
  display: none;
}

.list-news {
  font-size: 15px;
  color: #444;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //border-bottom: #102F7A 1px dashed;
}

.list-mark {
  width: 5px;
  height: 5px;
  background: #60A3D7;
  margin-right: 10px;
}

.list-title {
  cursor: pointer;
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
  white-space: nowrap; /* 防止换行 */
  width: 260px;
}

.title-img {
  height: 32px;
  //font-size: 18px;
  line-height: 32px;
  border-left: 8px solid #60A3D7;
  color: #60A3D7;
  font-weight: 500;
  padding-left: 12px;
  //margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-bg {
  //background: url('~@/assets/img/1.png') no-repeat center;
  background-image: url('~@/assets/img/3.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}



</style>
